<!-- subpkg_medicine/order_detail/index.vue -->
<script setup>
	import { ref } from 'vue'
	import { orderDetailApi } from '../../services/medicine'
	const props = defineProps({
		id: String,
	})
	const orderDetail = ref({})
	const getOrderDetail = async () => {
		const { code, data, message } = await orderDetailApi(props.id)
		if (code !== 10000) return uni.utils.toast(message)
		orderDetail.value = data
	}
	getOrderDetail()
	const paymentMethods = ['微信支付', '支付宝支付']
</script>

<template>
	<scroll-page background-color="#f6f6f6">
		<view class="medicine-page">
			<view class="page-header">
				<view class="order-status">
					<text class="label">药品订单 {{ orderDetail.actualPayment }}元</text>
					<text class="status">{{ orderDetail.statusValue }}</text>
				</view>
				<view class="order-shippment">
					<template v-if="orderDetail.status === 11">
						<view class="region">
							<text class="iconfont icon-location"></text>
							{{ orderDetail.addressInfo.province }}
							{{ orderDetail.addressInfo.city }}
							{{ orderDetail.addressInfo.county }}
						</view>
						<view class="detail">
							{{ orderDetail.addressInfo.addressDetail }}
						</view>
						<view class="receiver">
							{{ orderDetail.addressInfo.receiver }}
							{{ orderDetail.addressInfo.mobile }}
						</view>
					</template>
					<template v-if="orderDetail.status === 12">
						<navigator
							hover-class="none"
							:url="`/subpkg_medicine/timeline/index?id=${orderDetail.id}`"
						>
							<view class="marker">{{ orderDetail.expressInfo.content }}</view>
							<view class="datetime">{{ orderDetail.expressInfo.time }}</view>
							<view class="arrow">
								<uni-icons size="18" color="#C3C3C5" type="forward" />
							</view>
						</navigator>
					</template>
				</view>
			</view>

			<view class="order-shop">
				优医药房
				<text class="alt">优医质保 假一赔十</text>
			</view>
			<!-- 药品列表 -->
			<view class="medicine-list">
				<view
					class="medicine-list-item"
					v-for="medicine in orderDetail.medicines"
					:key="medicine.id"
				>
					<image
						class="medicine-cover"
						:src="medicine.avatar"
						mode="aspectFill"
					/>
					<view class="medicine-info">
						<text class="name">{{ medicine.name }}</text>
						<text class="unit symbol">24片</text>
						<text class="price">¥{{ medicine.amount }}</text>
					</view>
					<view class="quantity">x{{ medicine.quantity }}</view>
					<view class="guide">用法用量：{{ medicine.usageDosag }}</view>
				</view>
				<!-- <view class="medicine-list-item">
					<image
						class="medicine-cover"
						src="/static/uploads/medicine-2.jpg"
						mode="aspectFill"
					/>
					<view class="medicine-info">
						<text class="name">瑞巴派特片</text>
						<text class="unit symbol">24片</text>
						<text class="price">¥25.00</text>
					</view>
					<view class="quantity">x1</view>
					<view class="guide">用法用量：口服，每次1袋，每天3次，用药3天</view>
				</view> -->
			</view>

			<!-- 订单信息 -->
			<view class="order-info">
				<uni-list :border="false">
					<uni-list-item
						title="药品金额"
						:right-text="`¥${orderDetail.payment}`"
					/>
					<uni-list-item
						title="运费"
						:right-text="`¥${orderDetail.expressFee}`"
					/>
					<uni-list-item
						title="优惠券"
						show-arrow
						:right-text="`-¥${orderDetail.couponDeduction}`"
					/>
					<uni-list-item
						title="实付款"
						:right-text="`¥${orderDetail.actualPayment}`"
					/>
					<uni-list-item title="订单编号" :right-text="orderDetail.orderNo" />
					<uni-list-item
						title="创建时间"
						:right-text="orderDetail.createTime"
					/>
					<uni-list-item
						title="支付方式"
						:right-text="paymentMethods[orderDetail.paymentMethod]"
					/>
				</uni-list>
			</view>

			<view class="notice-bar">
				<uni-notice-bar text="请在 00:14:59 内完成支付，超时订单将取消" />
			</view>

			<!-- 底部 -->
			<view class="toolbar">
				<template v-if="false">
					<view class="total-amount">
						需付款: <text class="number">¥39.00</text>
					</view>
					<view class="buttons">
						<button class="uni-button minor">取消问诊</button>
						<button class="uni-button">立即支付</button>
					</view>
				</template>
				<template v-else>
					<view class="buttons">
						<view class="delete-botton">
							<uni-icons size="24" color="#848484" type="trash" />
							<text>删除订单</text>
						</view>
						<button class="uni-button">再次购买</button>
					</view>
				</template>
			</view>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	@import './index.scss';
</style>
